Î<template>
	<view>
		<nav-bars bgColor="#fff" fontColor="#000" title="搜索"></nav-bars>
		<view class="Search">
			<u-search placeholder="搜索您感兴趣的内容吧" placeholder-color="#939393" :show-action="true" v-model="keyword"
				@change="SearchChange" @search="EnterClick" @custom="customSearch" :animation="false" action-text="搜索">
			</u-search>
		</view>
		<view class="SearchView">
			<view class="SearchHot">
				<view>历史搜索</view>
				<u-icon @click="clearHistory" name="trash" color="#666" size="32"></u-icon>
			</view>
			<view class="SearchTags">
				<view class="SearchTagsItem" v-for="(item,index) in history" :key="index"
					@click="SearchHistoryClick(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="SearchView">
			<view class="SearchHot">
				热门搜索</view>
			<view class="SearchTags">
				<view class="SearchTagsItem" v-for="(item,index) in Search" :key="index" @click="SearchTagsClick(item.name)">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- <view class="PageNull" v-if="Hide">
			<image src="https://cos.ryz1620.com/liankun/static/nullBg.png"></image>
			<view class="PageNullText">无搜索结果，换个词试试吧~</view>
		</view> -->


	</view>
</template>
<script>
	import HomeSearch from '@/service/HomeSearch.js'
	export default {
		name: '',
		components: {},
		data() {
			return {
				history: uni.getStorageSync('history') ? JSON.parse(uni.getStorageSync('history')) : [],
				keyword: '', //搜索的双向数据
				Search: [], //热门搜索词
				scrollTop: 0,

			};
		},
		computed: {
			navHeight() {
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			}, // Nav栏高度
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		watch: {


		},
		created() {},

		onShow() {
			this.keyword = ''
			this.history = uni.getStorageSync('history') ? JSON.parse(uni.getStorageSync('history')) : []
			this.getHotKeyword()
		},
		mounted() {},
		methods: {
			// 输入框内容发生变化时触发	
			SearchChange(e) {
				// console.log(e);
			},
			// 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发	
			EnterClick(row) {
				let ishistory = this.SearchHistory(row)
				if (ishistory == "true") {
					uni.navigateTo({
						url: '/pages_now/pages/home/SearchList?keyword=' + row,
					});
				}
			},
			// 用户点击右侧控件时触发	
			customSearch(row) {
				let ishistory = this.SearchHistory(row)
				if (ishistory == "true") {
					uni.navigateTo({
						url: '/pages_now/pages/home/SearchList?keyword=' + row,
					});
				}
			},
			// 点击热门搜索词
			SearchTagsClick(row) {
				// console.log(row);
				this.keyword = row
				let ishistory = this.SearchHistory(row)
				// console.log(ishistory);
				if (ishistory == "true") {
					uni.navigateTo({
						url: '/pages_now/pages/home/SearchList?keyword=' + row,
					});
				}
			},
			SearchHistoryClick(row) {
				this.keyword = row
				uni.navigateTo({
					url: '/pages_now/pages/home/SearchList?keyword=' + row,
				});
			},
			clearHistory() {
				this.history = []
				this.keyword = ''
				uni.removeStorageSync('history');
			},
			SearchHistory(row) {
				const arr = uni.getStorageSync('history');
				const history = arr ? JSON.parse(arr) : [];
				if (row != '') {
					if (history.indexOf(row) === -1) {
						history.unshift(row);
						if (history.length >= 10) {
							history.splice(history.length - 1, 1);
						}
						uni.setStorageSync('history', JSON.stringify(history));
						this.history = uni.getStorageSync('history') ? JSON.parse(uni.getStorageSync('history')) : []
						return "true"
					}
					return "false"
				} else {
					this.$utils.showErr({
						title: '请输入您感兴趣的内容吧'
					})
					return "false"
				}
			},
			getHotKeyword() {
				var that = this
				HomeSearch.getHotKeyword({})
					.then(res => {
						if (res.code == 1) {
							console.log(res.data);
							that.Search = res.data
						} else {
							that.$utils.showErr({
								title: res.msg
							})
						}
					})
			},
		},
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.Search {
		padding: 16rpx 32rpx;
		border-top: 1px solid #f6f7fb;
	}

	.SearchView {
		.SearchHot {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			padding: 14rpx 32rpx 16rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.SearchTags {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 14rpx 16rpx 16rpx 16rpx;

			.SearchTagsItem {
				padding: 8rpx 24rpx;
				background: #F6F7FB;
				border-radius: 24px;
				font-size: 24rpx;
				font-weight: 400;
				color: #0A0605;
				margin: 0 16rpx 28rpx 16rpx
			}
		}
	}
</style>
